<template>
	<view class="conpage">
		<uni-nav-bar :statusBar="true" :fixed="true" :border='false' color="#113A62" backgroundColor="#E3EDF7" left-icon="back"
			 title="加班记录" rightIcon="plusempty" @clickLeft="back" @clickRight="goRight"/>
		<scroll-view scroll-y class="scroll-content" style="height: calc(100% - 78px);overflow-y: auto;marginTop: 0px"  @touchmove.stop>
			<view style="width: 100%;padding: 0 16px;box-sizing: border-box;">
				<view @click="detailClick(item)" v-for="(item,indexs) in dataList[1]" class="useAll">
					<view style="display: flex;justify-content: space-between;">
						<view class="use_text">
							{{item.ftowername}}
						</view>
						<view v-if="item.fbillstate == 1" class="use_text">
							<view>{{item.fupddateStr}}</view>
						</view>
						<view v-else-if="item.fbillstate == 2" class="use_text">
							<view>{{item.fcheckdateStr}}</view>
						</view>
						<view v-else-if="item.fbillstate == 3" class="use_text">
							<view>{{item.fcheckdateStr}}</view>
						</view>
						<view v-else-if="item.fbillstate == 8" class="use_text">
							<view>{{item.fupddateStr}}</view>
						</view>
					</view>
					<view class="use_content" style="display: flex;justify-content: space-between;">
						<view>
							{{item.fpointName}}
						</view>
						<view v-if="item.fbillstate == 1" class="use_time_audit">
							<view style="color: #D60000" v-if="item.overtime == '超时'">超时未批复</view>
							<view v-else>审核中...</view>
						</view>
						<view v-else-if="item.fbillstate == 2" class="use_time_agree">
							同意
						</view>
						<view v-else-if="item.fbillstate == 3" class="use_time_timeout">
							拒绝
						</view>
						<view v-else-if="item.fbillstate == 8" class="use_time_timeout">
							已取消
						</view>
					</view>
					<view class="use_content">
						{{item.fbegdatestr}}
					</view>
					<view class="use_content">
						{{item.fbegtime}} 至 {{item.fendtime}}
					</view>
					<view class="use_content">
						申请人 {{item.username}}
					</view>
					<view @click.stop="cancelAgain(item)" v-if="item.fbillstate == 1&&item.overtime == '超时'" class="cancelBtn">
						<image style="max-width: 23px;max-height: 23px;" src="../../static/image/searchClose.png" mode=""></image>
					</view>
					<view @click.stop="submitAgain(item)" v-if="item.fbillstate == 1&&item.overtime == '超时'" class="timeoutBtn">
						<image style="max-width: 20px;max-height: 20px;" src="../../static/image/resubmit.png" mode=""></image>
					</view>
				</view>	
			</view>	
			
			<view style="width: 100%;padding: 0 16px;box-sizing: border-box;">
				<view @click="detailClick(item)" v-for="(item,indexs) in dataList[0]" class="useAllRead">
					<view style="display: flex;justify-content: space-between;">
						<view class="use_text">
							{{item.ftowername}}
						</view>
						<view v-if="item.fbillstate == 1" class="use_text">
							<view>{{item.fupddateStr}}</view>
						</view>
						<view v-else-if="item.fbillstate == 2" class="use_text">
							<view>{{item.fcheckdateStr}}</view>
						</view>
						<view v-else-if="item.fbillstate == 3" class="use_text">
							<view>{{item.fcheckdateStr}}</view>
						</view>
						<view v-else-if="item.fbillstate == 8" class="use_text">
							<view>{{item.fupddateStr}}</view>
						</view>
					</view>
					<view class="use_content" style="display: flex;justify-content: space-between;">
						<view>
							{{item.fpointName}}
						</view>
						<view v-if="item.fbillstate == 1" class="use_time_audit">
							<view style="color: #D60000" v-if="item.overtime == '超时'">超时未批复</view>
							<view v-else>审核中...</view>
						</view>
						<view v-else-if="item.fbillstate == 2" class="use_time_agree">
							同意
						</view>
						<view v-else-if="item.fbillstate == 3" class="use_time_timeout">
							拒绝
						</view>
						<view v-else-if="item.fbillstate == 8" class="use_time_timeout">
							已取消
						</view>
					</view>
					<view class="use_content">
						{{item.fbegdatestr}}
					</view>
					<view class="use_content">
						{{item.fbegtime}} 至 {{item.fendtime}}
					</view>
					<view class="use_content">
						申请人 {{item.username}}
					</view>
					<view @click.stop="cancelAgain(item)" v-if="item.fbillstate == 1&&item.overtime == '超时'" class="cancelBtn">
						<image style="max-width: 23px;max-height: 23px;" src="../../static/image/searchClose.png" mode=""></image>
					</view>
					<view @click.stop="submitAgain(item)" v-if="item.fbillstate == 1&&item.overtime == '超时'" class="timeoutBtn">
						<image style="max-width: 20px;max-height: 20px;" src="../../static/image/resubmit.png" mode=""></image>
					</view>
				</view>	
			</view>
			<view v-if="dataList[0].length == 0&&dataList[1].length == 0" style="font-size: 18px;color: #113A62;opacity: 0.65;width: 100%;text-align: center;padding-top: 174px;">
				暂无数据
			</view>
		</scroll-view>
		<view v-if="isOut" class="shadow"></view>
		<view v-if="isOut" class="out_all">
			<view class="out_title">{{shadowTitle}}</view>
			<view class="out_text">
				{{shadowContent}}
			</view>
			<view style="margin-top: 50px;display: flex;justify-content: space-between;">
				<view class="cancel" @click="cancel()">取消</view>
				<view class="confirm" @click="confirm()">确定</view>
			</view>
		</view>
		
		<!-- 成功失败提示 -->
		<view v-if="isSuccess == 0 || isSuccess == 1" :class="isSuccess == 0 ? 'success' : 'error'">
			<view class="success_title">
				<view>
					<image v-show="isSuccess == 0" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/success.png" mode=""></image>
					<image v-show="isSuccess == 1" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:text-bottom;" src="../../static/image/error.png" mode=""></image>
					<text class="success_text">通知</text>
				</view>
				<view>
					<image @click="successClose()" style="max-width: 20px;max-height: 20px;line-height: 28px;vertical-align:middle;" src="../../static/image/searchClose.png" mode=""></image>
				</view>
				
			</view>
			<view class="success_content">
				{{successContent}}
			</view>
		</view>
	</view>
</template>

<script>
	import moment from '../../utils/moment.min.js'
	var that;
	export default {
		data() {
			return {
				sysInfo: null, // 系统变量
				tabList:[], // 头部按钮
				warningList:[], // 头部报警过滤按钮
				tabId: null, // 物料柜所点击按钮id
				dataList: [[],[]] ,// 报警条件列表
				warningId: null, // 报警条件所点击按钮id
				isOut: false, // 是否显示弹窗
				shadowTitle: '', // 弹窗标题
				shadowContent: '', // 弹窗内容
				shadowDate:'', // 选择的数据
				isSuccess: null, // 报错/成功提示内容
				successContent: '', // 报错/成功提示内容
			}
		},
		onLoad(e) {
			that = this
			that.sysInfo = this.$sys.getSysInfo();
			that.getList()
			uni.$on('refreshAddWork',() => {
				that.getList()
			})
		},
		methods: {
			getList(){
				that.$http.get('tcOvertime/getATcOvertimeList', {
					fsiteNo: that.sysInfo.fsiteNo,
					userId: that.sysInfo.userId,
					froleid: that.sysInfo.froleid
				}).then(e => {
					console.log('e111',e)
					// list[1]：未读，list[0]：已读
					that.dataList = e.list
				
				}).catch(()=>{
					that.dataList = []
				})
				
			},
			// 重新提交
			submitAgain(item){
				that.isOut = true
				that.shadowTitle = '重新提交'
				that.shadowContent = '确实重新提交该申请吗？'
				that.shadowDate = item
			},
			cancelAgain(item){
				that.isOut = true
				that.shadowTitle = '取消申请'
				that.shadowContent = '确实取消该申请吗？'
				that.shadowDate = item
			},
			// 取消
			cancel(){
				that.isOut = false
			},
			// 确定
			confirm(){
				that.isOut = false
				console.log('that.shadowTitle',that.shadowTitle)
				if(that.shadowTitle == '取消申请'){
					let temp = Object.assign({}, that.shadowDate)
					temp.fbillstate = 8
					that.$http.postData('tcOvertime/update',temp)
					.then(e => {
						that.isSuccess = 0
						that.successContent ='该数据已取消'
						setTimeout(function(){
							that.isSuccess = null
							that.getList()
						},2000)
					}).catch(()=>{
						that.isSuccess = 1
						that.successContent ='该数据取消失败'
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}else{
					//重新提交
					let temp = Object.assign({}, that.shadowDate) 
					let nextDay = moment(new Date()).add(1, 'days').format()
					temp.fbegdate = new Date(that.getDate(nextDay)) 
					temp.fenddate = new Date(that.getDate(nextDay)) 
					that.$http.postData('tcOvertime/create',temp).then(e => {
						that.isSuccess = 0
						that.successContent ='该数据重新提交成功'
						setTimeout(function(){
							that.isSuccess = null
							that.getList()
						},2000)
					}).catch(()=>{
						that.isSuccess = 1
						that.successContent ='该数据重新提交失败'
						setTimeout(function(){
							that.isSuccess = null
						},2000)
					})
				}
			},
			getDate(e) {
					const date = new Date(e)
					var y = date.getFullYear();
					var m = date.getMonth() + 1;
					m = m < 10 ? ('0' + m) : m;
					var d = date.getDate();
					d = d < 10 ? ('0' + d) : d;
					var h = date.getHours();
					var minute = date.getMinutes();
					minute = minute < 10 ? ('0' + minute) : minute;
					return y + '-' + m + '-' + d +' 00:00:00'
			},
			detailClick(item){
				this.$util.pageTo('me/workDetail?item=' + encodeURIComponent(JSON.stringify(item)) )
			},
			back() {
				// uni.navigateBack({
				// 	delta: 1
				// })
				that.$util.redirectTo('me/index');
			},
			goRight(){
				that.$util.pageTo('me/addWork')
			}
		}
	}
</script>

<style>
	/* 遮罩层 */
	.shadow{
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		background: #FAFCFD;
		opacity: 0.85;
	}
	.out_all{
		width: 85%;
		margin: 0 auto;
		height: 200px;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		position: absolute;
		left: 0;
		right: 0;
		top: 28%;
		bottom: 0;
		padding: 16px;
	}
	.cancel{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.confirm{
		width: 45%;
		height: 48px;
		line-height: 48px;
		text-align: center;
		background: #E3EDF7;
		/* outer2 */
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		letter-spacing: -0.4px;
		color: #8B9EB0;
	}
	.out_title{
		width: 100%;
		text-align: center;
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 20px;
		line-height: 40px;
		/* identical to box height, or 167% */
		color: #113A62;
		margin-top: 15px;
	}
	.out_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 18px;
		line-height: 28px;
		color: #113A62;
		margin: 12px 0 0 10px;
	}
	
	.useAll{
		width: 100%;
		/* height: 137px; */
		margin: 20px auto;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		padding: 16px;
		box-sizing: border-box;
		position: relative;
	}
	
	.useAllRead{
		width: 100%;
		/* height: 137px; */
		margin: 20px auto;
		background: #E3EDF7;
		box-shadow: inset -4px -4px 9px rgba(255, 255, 255, 0.6), inset 4px 4px 14px #C5D7EE;
		border-radius: 4px;
		padding: 16px;
		box-sizing: border-box;
		position: relative;
	}
	.use_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		opacity: 0.9;
	}
	.use_img{
		max-width: 16px;
		max-height: 16px;
		vertical-align:middle;
		margin-right: 10px
	}
	.use_content{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		color: #113A62;
		margin: 8px 0;
		opacity: 0.9;
	}
	.use_time{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 22px;
		color: #113A62;
		opacity: 0.6;
	}
	.use_time_audit{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: -0.023em;
		color: #434543;
	}
	.use_time_agree{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: -0.023em;
		color: #117800;
	}
	.use_time_timeout{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 12px;
		line-height: 22px;
		letter-spacing: -0.023em;
		color: #D60000;
	}
	.timeoutBtn{
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 8px;
		position: absolute;
		top: 70%;
		right: 3%;
	}
	.cancelBtn{
		width: 40px;
		height: 40px;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 8px;
		position: absolute;
		top: 70%;
		right: 22%;
	}
	.dateSty{
		/* Subtitle */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 600;
		font-size: 16px;
		height: 30px;
		line-height: 30px;
		color: #113A62;
		opacity: 0.6;
		margin-left: 12px;
	}
	.title{
		/* Text */
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 24px;
		/* identical to box height, or 150% */
		color: #113A62;
		width: 100%;
		text-align: center;
		padding-top: 3px;
	}
	
	.success{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(225, 255, 220, 0.5), rgba(225, 255, 220, 0.5)), #E3EDF7;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.error{
		width: 80%;
		height: 116px;
		background: linear-gradient(0deg, rgba(255, 40, 40, 0.2), rgba(255, 40, 40, 0.2)), #FFFFFF;
		box-shadow: 2px 2px 4px rgba(114, 142, 171, 0.1), -6px -6px 20px #FFFFFF, 4px 4px 20px rgba(111, 140, 176, 0.41);
		border-radius: 4px;
		margin: auto;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		box-sizing: border-box;
		padding: 16px;
	}
	.success_title{
		width: 100%;
		display: flex;
		justify-content: space-between;
		/* padding: 18px; */
	}
	.success_text{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 16px;
		line-height: 22px;
		color: #113A62;
		margin-left: 10px;
	}
	.success_content{
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 14px;
		line-height: 18px;
		color: #113A62;
		margin-top: 6px;
	}
</style>
